<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

    <style type="text/css">
        #tx {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline;
            position: absolute;
            top: 7px;
            left: 3px;
        }

        .member_info {
            float: left;
            width: 14%;
            margin-left: 2%;
            background-color: #FFFFFF;
        }

        .group_member {
            /*border-bottom:1px solid #EFEFEF;*/
            /*margin:0px 15px*/
            background-color: #FFFFFF;

        }

        .member_info div {
            margin: 10px 0px;
        }

        .meber_nickname {
            color: #000000;
            padding: 2px;
            text-align: center;
            font-size: 14px
        }
        .aui-switch:checked{
          background-color: #4FAF6A;
          border: solid 1px #4FAF6A;
        }
        .group_member{
          overflow: hidden;
          height: 10vh;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
     <div class="group-info-header" style="background:#5569AE;text-align:center;color:#ffffff;padding-bottom:30px">
       <div class="header_nav" style="padding-top:30px;">
         <img v-src="'../../image/back_white.png'" style="float:left;width:20px;margin-left:15px" onclick="closeWin()"/>
         <img v-src="'../../image/edit.png'" style="float:right;width:20px;margin-right:15px" v-myclick="edit" v-show="showfn==0&&groupinfo.role>=2">
         <span class='fnSave'  style="position:absolute;right:10px;font-size:14px;" v-myclick="[1, fnSave]" v-show="showfn==1">确定</span>

         <div style="clear:both"></div>
       </div>
       <div style="width:40%;margin:0 auto;margin-top:10px" v-myclick="setPortrait"><img :src="groupinfo.portrait ? groupinfo.portrait : '../../image/qer.png'" width="60%" style="border-radius:4px"></div>
       <div style="font-size:18px;margin-top:10px">{{groupinfo.clan_name}}</div>
       <div style="padding:2px 6px;border:1px solid #ffffff;border-radius:3px;width:23%;margin:0 auto;background:#ffffff;color:#5569AE;margin-top:5px;font-size:12px">{{groupinfo.name}}</div>

     </div>
     <div style="text-align:center;margin-top:15px;">
       <!-- <div style="margin:0 auto;background:#DBE0F0;width:55%;border-radius:20px;font-size:12px;padding:4px 5px">
         <span style="vertical-align: middle;">两名用户申请加入该家族</span>
         <img v-src="'../../image/next.png'" style="vertical-align: middle;width:15px">
       </div> -->
     </div>
    <div class="group_top_info" style="margin-top:15px">
      <ul class="aui-list aui-list-in " >
          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">家族ID</div>
                  <div class="aui-list-item-right">{{groupinfo.clan_unique_id}}</div>
              </div>
          </li>
          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">创建时间</div>
                  <div class="aui-list-item-right">{{groupinfo.date_add| date2}}</div>
              </div>
          </li>
          <li class="aui-list-item" v-myclick="encodeImg">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-title">家族二维码</div>
                  <div class="aui-list-item-right"><img v-src="'../../image/4_erweima_1.png'" width="20px"></div>
              </div>
          </li>
        </ul>

          <ul class="aui-list aui-media-list" style="margin-top:5px">
          <li class="aui-list-item aui-list-item-arrow ">
                          <div class="aui-media-list-item-inner" v-myclick="annonce">
                              <div class="aui-list-item-inner">
                                  <div class="aui-list-item-text">
                                      <div class="aui-list-item-title">家族公告</div>
                                      <!-- <div class="aui-list-item-right">08:00</div> -->
                                  </div>
                                  <div class="aui-list-item-text aui-ellipsis-2">
                                      {{groupinfo.notice}}
                                  </div>
                              </div>
                          </div>
                      </li>
                    </ul>
                    <ul class="aui-list aui-list-in" style="margin-top:5px" v-myclick="[groupinfo.clan_id,showall]">
                        <li class="aui-list-item">
                            <div class="aui-list-item-inner aui-list-item-arrow">
                                <div class="aui-list-item-title">家族成员</div>
                                <div class="aui-list-item-right">
                                    <div class="aui-badge" style="position:relative;top:0; left:0;background-color:#ffffff;color:#999999">共{{groupinfo.members.members_count}}名成员</div>
                                </div>
                            </div>
                        </li>
                    </ul>
        <div class="group_member">
            <div class="member_info" v-myclick="[content.member_id, member_info]" v-for="(content, index) in groupinfo.members.members">
                <div class="member_avatar"><img style="width:50px;height:50px;border-radius:5px" v-image-resize="{src:content.portrait?content.portrait:'../res/tx00.jpg'}"></div>
                <!-- <div class="meber_nickname">{{content.name}}</div> -->
            </div>
            <div style="clear:both"></div>
        </div>
        <ul class="aui-list aui-list-in" style="margin-top:5px" v-if="groupinfo.members.managers" v-myclick="[groupinfo.clan_id,showmanagers]">
            <li class="aui-list-item">
                <div class="aui-list-item-inner aui-list-item-arrow">
                    <div class="aui-list-item-title">家族长老</div>
                    <div class="aui-list-item-right">
                        <div class="aui-badge" style="position:relative;top:0; left:0;background-color:#ffffff;color:#999999">共{{groupinfo.members.managers_count}}名长老</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="group_member" v-if="groupinfo.members.managers">
        <div class="member_info" v-myclick="[content.member_id, member_info]" v-for="(content, index) in groupinfo.members.managers">
            <div class="member_avatar"><img style="width:50px;height:50px;border-radius:5px" v-image-resize="{src:content.portrait?content.portrait:'../res/tx00.jpg'}"></div>
            <!-- <div class="meber_nickname">{{content.name}}</div> -->
        </div>
        <div style="clear:both"></div>
        </div>
        <!-- <ul class="aui-list aui-list-in" style="margin-top:5px">
          <li class="aui-list-item aui-list-item-middle">
                      <div class="aui-list-item-inner aui-list-item-arrow">
                          禁言管理
                  </div></li>

        </ul> -->
        <ul class="aui-list aui-list-in" style="margin-top:5px">
          <li class="aui-list-item aui-list-item-middle" v-myclick="modification">
            <div class="aui-list-item-inner aui-list-item-arrow">
              我的群昵称
              <div style="color:#999999">
                {{groupinfo.member_nickname}}
              </div>
            </div>
          </li>
        </ul>
        <ul class="aui-list aui-list-in" style="margin-top:5px">
          <li class="aui-list-item">
            <div class="aui-list-item-inner">
              <div class="aui-list-item-title">消息免打扰</div>
              <div class="aui-list-item-right">
                <input type="checkbox" class="aui-switch" checked="">
              </div>
          </div>
        </li>
      </ul>
    </div>
		<div style="margin:20px 0px;padding:15px;background-color:#ffffff;color:#FF5151;text-align:center" v-myclick="[groupinfo,quit]">
			退出家族
		</div>
    <div class="userinfo-modal" :class="qrcodeModal" v-myclick.stop="[false, changeShowQrcode]">
        <div class="userinfo-modal-alert" :class="qrcodeModal" style="margin-top:-170px;">
            <img class="alert-close" v-src="'../../image/btn_close_black.png'" v-myclick="[false, changeShowQrcode]">
            <p class="alert-title">家族二维码</p>
            <img :src="qrcodeImg" style="width:80%;margin-top:20px;">
        </div>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>

<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script type="text/javascript">
    var groupinfo;
    var group_nickname
    apiready = function () {
        api.parseTapmode();
        scanner = api.require('FNScanner');
        FNImageClip = api.require('FNImageClip');

        showProgress();
        setBSImg();
        var data = {
            member_id: getPrefs('member_id'),
            clan_id: api.pageParam.group_id
        };
        var callback = function (ret) {
            groupinfo = ret.content;
            console.log(JSON.stringify(groupinfo));
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.getClanInfo, data, callback);


        addListeners();
    };

		function initApp() {

        vm = new Vue({
            el: '#app',
            data: {
                groupinfo:groupinfo,
                showQrcode:false,
                qrcodeImg:'',
                showfn:0,
                nickname: group_nickname,
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small'
                },
            },
            computed: {
              qrcodeModal: function () {
                  return {
                      show: this.showQrcode,
                      hide: !this.showQrcode
                  }
              },
            },
            methods: {
              member_info:function(uid){
                openWin('../chat/member_info',{uid:uid,group_id:api.pageParam.group_id})
              },
              showmanagers:function(group_id) {
                openWin('../chat/group_managers',{group_id: group_id,role: this.groupinfo.role})
              },
              edit:function(){
                if(parseInt(this.groupinfo.role)>1){
                  openWin('../chat/group_name',{name:this.groupinfo.clan_name,clan_id:this.groupinfo.clan_id})
                }
              },
              encodeImg: function () {
                  this.showQrcode = true;
                  scanner.encodeImg({
                      content: 'type=addgroup&groupid='+groupinfo.clan_unique_id,
                      saveImg: {
                          path: 'fs://qrcode_group'+groupinfo.clan_unique_id+'.png',
                          w:400,
                          h:400,
                      }
                  }, function (ret) {

                      if (ret.status) {
                          vm.qrcodeImg = ret.imgPath;
                      }
                  })
              },
              changeShowQrcode: function (flag) {
                  this.showQrcode = flag;
              },
              showall:function(group_id){
                openWin('../chat/group_members',{group_id: group_id,role: groupinfo.role})
              },
              annonce:function() {
                if(parseInt(this.groupinfo.role)>1){
                  openWin('../home/announcement',{group_id:api.pageParam.group_id,notice:this.groupinfo.notice})
                }
              },
              quit:function(clan){
                api.confirm({
                    title: '提示',
                    msg: '确认退出？',
                    buttons: ['确定', '取消']
                }, function(ret, err){
                    if( ret.buttonIndex == 1 ){
                      var data = {
                          member_id: getPrefs('member_id'),
                          clan_id:clan.clan_id
                      };
                      var callback = function (ret) {
                          //融云建群
                          api.toast({
                              msg: '退出成功',
                              duration: 2000,
                              location: 'bottom'
                          });
                          api.sendEvent({
                            name : 'hhxx',
                          });
                          api.sendEvent({
                              name: 'updateClan',
                          });

                          var rong = api.require('rongCloud2');
                          // // 移除掉回话，不删除内容
                          // rong.removeConversation({
                          //     conversationType: 'GROUP',
                          //     targetId: clan.clan_im_id
                          // }, function(ret, err) {
                          // })
                          // rong.clearMessages({
                          //     conversationType: 'GROUP',
                          //     targetId: clan.clan_im_id
                          // }, function(ret, err) {
                          //
                          // })


                          api.sendEvent({
                            name: 'quitgroup',
                            extra: {
                                targetId: clan.clan_im_id,
                            }
                          });

                          openWin('../../index');


                      };
                      pinet.post(URL.quitClan, data, callback);
                    }else{

                    }
                });

              },
              setPortrait: function () {
                if(parseInt(this.groupinfo.role)<=1){
                  return;
                }
                  api.actionSheet({
                      cancelTitle: '取消',
                      buttons: ['拍照', '从手机相册选择'],
                      style: {
                          fontNormalColor: '#000',
                          fontPressColor: '#000',
                      }
                  }, function (ret, err) {
                      var index = ret.buttonIndex;
                      switch (index) {
                          case 1:
                              return vm.getPicture('camera');
                          case 2:
                              return vm.getPicture('album');
                          default:
                              break;
                      }
                  });
              },
              getPicture: function (sourceType) {
                  api.getPicture({
                      sourceType: sourceType,
                      targetWidth:600,
                      encodingType:'jpg'
                  }, function (ret,err) {

                      if (ret) {
                        vm.showfn=1;
                        FNImageClip.open({
                            rect: {
                              x: 0,
                              y: 60,
                              w: api.winWidth,
                              h: api.winHeight - 60
                            },
                            srcPath: ret.data,
                            style: {
                                mask: '',
                                clip: {
                                  w: api.winWidth,
                                  h: api.winWidth,
                                  x: 0,
                                  y: 80,
                                    borderColor: '#FFFFFF',
                                    borderWidth: 1,
                                    appearance: 'rectangle'
                                }
                            },
                            mode:'image'
                        });
                      }
                  });
              },
              fnSave :function(){
                var savename = new Date().getTime()+'.png';
                FNImageClip.save({
                    destPath: 'fs://image/temp'+savename,
                    copyToAlbum: false,
                    quality: 1
                },function(ret, err){
                    if(ret) {

                      var obj = api.require('qiniuUpfile');
                      var baseUrl = 'http://rgsqn.tiaocheng-tech.com/'; //七牛给你的测试域名，也可使用自己捆绑的域名youe.xxx.com
                      obj.upfile({
                          file: ret.destPath,
                          name: savename
                      }, function(ret, err) {
                          if (ret.status) {
                              if (ret.oper == "complete") {
                                  //上传成功后组装访问路径，或直接访问文档
                                  vm.group_avatar = qiniuhost + ret.info.key;
                                  var data = {
                                      member_id: getPrefs('member_id'),
                                      portrait: qiniuhost + ret.info.key,
                                      clan_id:api.pageParam.group_id
                                  };
                                  var callback = function (ret) {
                                      // onPageEnd();
                                      api.sendEvent({
                                          name: 'updateClan',
                                          extra: {
                                              name:vm.nickname,
                                          }
                                      });
                                      window.location.reload();

                                  };
                                  pinet.post(URL.updateClan, data, callback);
                                  // sendFileMessage(baseUrl + ret.info.key,name,size,file_class);
                                  // $api.text(b, baseUrl + ret.info.key);
                              } else if (ret.oper == "progress") {
                                  // $api.css($api.dom("."+file_class), 'width:'+ret.percent+'%');
                              }
                          }
                      });
                      vm.showfn=0;
                      FNImageClip.close();
                    } else{
                        alert('裁剪失败，请重试');
                    }
                });
              },
              modification:function(){
                openWin('../frame/frame_modification_nickname',{clan_id: this.groupinfo.clan_id,member_nickname:this.groupinfo.member_nickname });
              }
            }

        });
    }
    function closeWin() {
      api.closeWin({
      });
    }

    function addListeners() {
      api.addEventListener({
          name: 'updateClan'
      }, function (ret, err) {
        var data = {
            member_id: getPrefs('member_id'),
            clan_id: api.pageParam.group_id
        };
        var callback = function (ret) {

            vm.groupinfo = ret.content;
            console.log(JSON.stringify(ret.content))
        };
        pinet.post(URL.getClanInfo, data, callback);
      });
    }

</script>
</html>
